import { useUserStoreHook } from "@/store/modules/user"
import { Directive, DirectiveBinding } from "vue"

/**
 * 按钮权限
 */
export const hasPerm: Directive = {
    mounted(el: HTMLElement, binding: DirectiveBinding) {
        // 「超级管理员」拥有所有的按钮权限
        const { roles, perms } = useUserStoreHook().user
        if (roles.includes("ROOT")) {
            return true
        }
        // 「其他角色」按钮权限校验
        const { value } = binding
        if (value) {
            const requiredPerms = value // DOM绑定需要的按钮权限标识

            const hasPerm = perms?.some((perm) => {
                return requiredPerms.includes(perm)
            })

            if (!hasPerm) {
                el.parentNode && el.parentNode.removeChild(el)
            }
        } else {
            throw new Error(
                "need perms! Like v-has-perm=\"['sys:user:add','sys:user:edit']\""
            )
        }
    },
}

/**
 * 角色权限
 */
export const hasRole: Directive = {
    mounted(el: HTMLElement, binding: DirectiveBinding) {
        const { value } = binding

        if (value) {
            const requiredRoles = value // DOM绑定需要的角色编码
            const { roles } = useUserStoreHook().user
            const hasRole = roles.some((perm) => {
                return requiredRoles.includes(perm)
            })

            if (!hasRole) {
                el.parentNode && el.parentNode.removeChild(el)
            }
        } else {
            throw new Error("need roles! Like v-has-role=\"['admin','test']\"")
        }
    },
}
